<template>
	<div>
		<template>
			<el-table :data="zNodes"  style="width: 100%">
				<el-table-column prop="configvaluename" label="缺陷类型名称" width="380">
				</el-table-column>
				<!-- <el-table-column prop="isstart" label="状态 (启用/未启用)" width="380">
					<template #default="scope">
						<div>
							<el-radio v-model="scope.row.isstart" label="1" :disabled="true">通过</el-radio>
							<el-radio v-model="scope.row.isstart" label="0" :disabled="true">拒绝</el-radio>
						</div>
					</template>
				</el-table-column -->>
				<el-table-column prop="isstart" label="状态(启用/未启用)">
					<template #default="scope">
						<el-radio-group v-model="scope.row.isstart" >
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">未启用</el-radio>
						</el-radio-group>
					</template>
				</el-table-column>

				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button icon="el-icon-circle-plus-outline" type="primary" plain size="mini" slot="reference"
							@click="dialogFormVisibleAdd = true">添加缺陷类型</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :page-size="page.size"  style="margin-top: 20px;" background
				layout="prev, pager, next" :total="page.total" @current-change="handleCurrentChange">
			</el-pagination>
		</template>
		
		<!-- 添加嵌套表单 -->
		<el-dialog title="添加角色" :visible.sync="dialogFormVisibleAdd" :append-to-body="true">
			<el-form :model="form">
				<!-- <el-form-item label="角色编号" >
					<el-input v-model="form.id" autocomplete="off" style="width: 500px;"></el-input>
				</el-form-item> -->
				<el-form-item label="缺陷类型名称:" >
					<el-input v-model="form.configvaluename"  autocomplete="off" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="状态(启用/未启用)">
					<template #default="scope">
						<div>	
							<el-radio v-model="form.isstart" label="1">启用</el-radio>
							<el-radio v-model="form.isstart" label="0">未启用</el-radio>
						</div>
					</template>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 修改嵌套表单 -->
		<el-dialog title="修改角色" :visible.sync="dialogFormVisibleupdate" :append-to-body="true">
			<el-form :model="form">
				<el-form-item label="编号" >
					<el-input v-model="form.id" autocomplete="off" style="width: 500px;" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="缺陷类型名称" >
					<el-input v-model="form.configvaluename"  autocomplete="off" style="width: 500px;"></el-input>
				</el-form-item>
				<!-- <el-form-item label="状态(启用/未启用)">
						<el-radio v-model="form.isstart" label="1">启用</el-radio>
						<el-radio v-model="form.isstart" label="0">未启用</el-radio>
				</el-form-item> -->
				<el-table-column prop="form" label="状态(启用/未启用)">
					<template #default="scope">
						<el-radio-group v-model="scope.row.isstart" >
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">未启用</el-radio>
						</el-radio-group>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="form.isstart" label="状态(启用/未启用)">
					<template #default="scope">
						<el-radio-group v-model="scope.row.isstart">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">未启用</el-radio>
						</el-radio-group>
					</template>
				</el-table-column> -->

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
				<el-button type="primary" @click="childUpdate()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改嵌套表单 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogFormVisibleupdate:false,
				dialogFormVisibleAdd:false,
				nowPage:"",
				zNodes:[{}],
				PsSystemconfig:{
					id:'',
					configcode:'',
					configname:'',
					configvalueid:'',
					configvaluename:'',
					isstart:''
				},
				page:{
					size:'',
					total:''
				},
				form: {
					id: '',
					configvaluename: '',
					isstart: null
				}
			}
		},
		methods: {
			//删除
			handleDelete(index, row) {
				console.log(index, row);
				this.$confirm('是否删除数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let id = row.id;
					console.log(index, row.id);
					this.axios.get("http://localhost:8080/systemconfig/del", {
						params: {
							id:row.id
						},
						headers: {}
					}).then((res) => {
						if (res.data == true) {
							alert("删除成功");
						}
						this.show();
					}).catch(err => {
						console.log(err);
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//编辑参数绑定
			handleEdit(index,row){
				console.log(index,row);
				this.dialogFormVisibleupdate=true;
				this.form.id=row.id;
				this.form.configvaluename=row.configvaluename;
				this.form.isstart=row.isstart;
			},
			//添加
			add(){
				this.axios.get("http://localhost:8080/systemconfig/add",{
					params:{
						configValueName:this.form.configvaluename,
						isStart:this.form.isstart
					}
				}).then((res)=>{
					console.log(res);
					if(res.data==true){
						alert("添加成功！")
						this.show();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			//分页
			handleCurrentChange(val){
				this.nowPage=val;
				this.show();
			},
			//查询
			show(){
				this.axios.get("http://localhost:8080/systemconfig/show",{
					params:{
						nowPage:this.nowPage
					},
					headers:{}
				}).then((res)=>{
					this.zNodes=res.data.records;
					this.page.total=res.data.total;
					this.page.size=res.data.size;
					console.log(res);
				}).catch(err=>{
					console.log(err);
				});
			}
		},
		mounted() {
			this.show();
		}
	}
</script>

<style>
</style>